<!--
 * @Description: 一卡通推广弹窗
 * @Author: Li Yujie
 * @Date: 2020/12/22
 * @Last Modified by: Li Yujie
 * @Last Modified time: 2020/12/22
-->
<template>
    <div
        class="member-card-extension"
        v-if="dialogVisible && formData"
    >
        <el-dialog
            title="一卡通推广"
            :visible.sync="dialogVisible"
            width="710px"
            :close-on-click-modal="false"
        >
            <p class="title">分享链接</p>
            <div class="url">
                <p class="link">
                    {{ host }}{{ share_url }}
                </p>
                <p
                    class="copy"
                    @click="copyUrl(host + share_url)"
                >
                    复制链接
                </p>
            </div>
            <div class="content">
                <p class="title">分享海报</p>
                <div
                    class="wrap"
                    id="canvasHtml"
                    ref="canvasHtml"
                    v-loading="loading"
                >
                    <div class="top">
                        <div class="card-title pos">
                            {{ formData.title }}
                        </div>
                        <div class="money pos">
                            预计一年可省908元
                        </div>
                        <div class="btn pos">
                            包月仅需¥{{ formData.buy_config[0].price }}
                        </div>
                        <img
                            src="@/assets/image/vip.png"
                            class="side-bg"
                            alt="加载失败"
                        >
                    </div>
                    <div class="qrcode">
                        <div class="code-wrapper">
                            <img
                                :src="code"
                                alt="加载失败">
                        </div>
                        <div class="tips">
                            长按识别二维码
                        </div>
                    </div>
                </div>
                <div class="button">
                    <p
                        class="button-wrap"
                        @click="downHb()"
                    >
                        下载海报
                    </p>
                    <p
                        class="button-wrap"
                        @click="downLoadCode(code, formData.title)"
                    >
                        下载二维码
                    </p>
                </div>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import html2canvas from 'html2canvas';

export default {
    data() {
        return {
            dialogVisible: false,
            formData: null,
            // 分享链接
            share_url: '/pages/ucenter/member/member-page',
            // 二维码图片地址
            code: '',
            host: '',
            loading: true
        };
    },
    mounted() {
        this.host = this.$studentBaseUrl;
    },
    methods: {
        /**
         * @description 初始化弹窗
         * @param row - 一卡通信息
         */
        show(row) {
            this.dialogVisible = true;
            this.getDetail(row.vip_no);
        },

        /**
         * @description 关闭弹窗
         */
        close() {
            this.dialogVisible = false;
        },
        /**
         * 获取一卡通信息
         * @param no - 一卡通编号
         */
        getDetail(no) {
            let params = {
                vip_no: no
            };

            this.$post('/student/student_vip%5Cget', params, resp => {
                if (resp.code === 1) {
                    this.formData = resp.data;
                    this.getCode();
                } else {
                    this.$notify({
                        title: '提示',
                        message: resp.msg,
                        duration: 2000,
                        type: 'warning'
                    });
                }
                setTimeout(() => {
                    this.loading = false;
                }, 200);
            });
        },

        /**
         * @description 获取二维码
         */
        getCode() {
            let base = this.$baseUrl;
            let ticket = localStorage.getItem('sessionTicket');
            let url = `${this.$studentBaseUrl}${this.share_url}`;

            this.code = `${base}/__local/common%5Cqrcode?content=${url}&__ticket=${ticket}`;
        },

        /**
         * @description 下载二维码
         * @param src
         * @param imgName
         */
        downLoadCode(src, imgName) {
            let canvas = document.createElement('canvas');
            let img = document.createElement('img');

            img.onload = function (e) {
                canvas.width = img.width;
                canvas.height = img.height;
                let context = canvas.getContext('2d');

                context.drawImage(img, 0, 0, img.width, img.height);
                canvas.getContext('2d').drawImage(img, 0, 0, img.width, img.height);
                canvas.toBlob((blob) => {
                    let link = document.createElement('a');

                    link.href = window.URL.createObjectURL(blob);
                    link.download = imgName.split('.')[0];
                    link.click();
                },
                "image/png");
            };
            img.crossOrigin = "Anonymous";
            img.src = src;
        },

        /**
         * @description 下载海报
         */
        downHb() {
            html2canvas(this.$refs.canvasHtml, {
                backgroundColor: null,
                allowTaint: false,
                taintTest: true,
                useCORS: true,
                scale: 3,
                dpi: 300
            }).then((canvas) => {
                document.body.appendChild(canvas);
                let dataURL = canvas.toDataURL("image/png");

                this.fnDownLoadFile(this.formData.title + '.png', dataURL);
            });
        },

        /**
         * @description 下载base64图片
         * @param {String} fileName - 图片名称
         * @param {String} content - base64
         */
        fnDownLoadFile(fileName, content) {
            let aLink = document.createElement('a');
            let blob = this.base64ToBlob(content);
            let evt = document.createEvent("HTMLEvents");

            //initEvent 不加后两个参数在FF下会报错  事件类型，是否冒泡，是否阻止浏览器的默认行为
            evt.initEvent("click", true, true);
            aLink.download = fileName;
            aLink.href = URL.createObjectURL(blob);
            //兼容火狐
            aLink.dispatchEvent(new MouseEvent('click', {bubbles: true, cancelable: true, view: window}));
        },

        /**
         * base64转换blob
         * @param code
         * @returns {Blob}
         */
        base64ToBlob(code) {
            let parts = code.split(';base64,');
            let contentType = parts[0].split(':')[1];
            let raw = window.atob(parts[1]);
            let rawLength = raw.length;
            let uInt8Array = new Uint8Array(rawLength);

            for (let i = 0; i < rawLength; ++i) {
                uInt8Array[i] = raw.charCodeAt(i);
            }
            return new Blob([uInt8Array], {type: contentType});
        },

        /**
         * 复制链接
         * @param url
         */
        copyUrl(url) {
            let str = url;
            let oInput = document.createElement("input");

            oInput.value = str;
            document.body.appendChild(oInput);
            oInput.select();
            document.execCommand("Copy");
            oInput.style.display = "none";
            this.$notify({
                title: '提示',
                message: '复制成功',
                type: 'success',
                duration: 2000
            });
        }
    }
};
</script>

<style lang="less" scoped>
.member-card-extension {
    .title {
        color: rgba(51, 51, 51, 1);
        height: 20px;
        line-height: 20px;
        font-weight: 500;
        font-size: 14px;
        margin-bottom: 12px;
    }

    .url {
        width: 100%;
        height: 20px;
        display: flex;
        align-items: center;
        margin-bottom: 24px;

        .link {
            color: rgba(51, 51, 51, 1);
            font-size: 12px;
            margin-right: 10px;
            line-height: 22px;
        }

        .copy {
            color: rgba(24, 144, 255, 1);
            font-size: 12px;
            text-decoration: underline;
            cursor: pointer;
            white-space: nowrap;
        }
    }

    .content {
        width: 100%;
        height: 356px;
        display: flex;
        align-items: flex-start;

        .title {
            color: rgba(51, 51, 51, 1);
            height: 20px;
            line-height: 20px;
            font-size: 14px;
            font-weight: 500;
            margin-right: 24px;
        }

        .wrap {
            width: 230px;
            height: 356px;
            display: flex;
            flex-direction: column;
            border-radius: 8px;
            border: 8px solid #252F4B;
            background: #fff;

            .top {
                position: relative;
                height: 205px;
                display: flex;
                flex-direction: column;
                align-items: center;
                overflow: hidden;

                .side-bg {
                    position: absolute;
                    left: -8px;
                    top: 0;
                    z-index: 1;
                }

                .pos {
                    width: 100%;
                    position: absolute;
                    z-index: 2;
                    text-align: center;
                    font-family: PingFangSC-Regular, PingFang SC;
                }

                .card-title {
                    font-size: 14px;
                    font-weight: 400;
                    color: #C3872F;
                    top: 16px;
                }

                .money {
                    top: 42px;
                    font-size: 16px;
                    font-family: PingFangSC-Semibold, PingFang SC;
                    font-weight: 600;
                    color: #3A4061;
                    line-height: 16px;
                }

                .btn {
                    width: 96px;
                    height: 20px;
                    line-height: 20px;
                    background: linear-gradient(90deg, #8980D4 0%, #6C5FC6 100%);
                    border-radius: 10px;
                    top: 68px;
                    font-size: 10px;
                    font-weight: 400;
                    color: #FFFFFF;
                }
            }

            .qrcode {
                background: #fff;
                width: 100%;
                flex: 1;
                display: flex;
                align-items: center;
                justify-content: center;
                flex-direction: column;

                .code-wrapper {
                    width: 94px;
                    height: 94px;
                    border: 1px solid #F7F6FD;
                    display: flex;
                    align-items: center;
                    justify-content: center;

                    img {
                        width: 82px;
                        height: 82px;
                    }
                }

                .tips {
                    font-size: 10px;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: #333333;
                    line-height: 14px;
                    margin-top: 4px;
                }
            }
        }

        .button {
            display: flex;
            flex-direction: column;
            margin-left: 24px;

            .button-wrap {
                width: 96px;
                height: 36px;
                border-radius: 4px;
                background-color: rgba(24, 144, 255, 1);
                text-align: center;
                line-height: 36px;
                color: #ffffff;
                font-size: 14px;
                font-weight: 500;
                cursor: pointer;
                margin-bottom: 32px;
            }
        }
    }
}

/deep/ .el-dialog {
    .el-dialog__header {
        padding-top: 10px;
        box-shadow: 0 1px 0 0 rgba(233, 233, 233, 1);
        display: flex;
        align-items: center;
        background: #FAFAFA;
        border-radius: 4px 4px 0 0;

        .el-dialog__title {
            font-weight: 500;
            color: #333;
            font-size: 14px;
        }

        .el-icon-close:before {
            color: rgb(194, 194, 194);
            font-size: 17px;
            font-weight: bold;
        }

        .el-dialog__headerbtn {
            top: 14px;
        }
    }

    .el-dialog__body {
        padding: 24px 32px;
    }

    .el-textarea__inner {
        resize: none;
    }

    .el-dialog__footer {
        text-align: center;
        padding-bottom: 30px;
        margin-top: 6px;
    }
}
</style>
